<template>
  <div>
    <div class="table">
      <div class="title">{{ title }}</div>
      <div class="form">
        <CommonForm :tableForm="tableForm1" />
        <div class="subheading">监测商标基本信息</div>

        <CommonTable
          :plainOptions="plainOptions"
          :columnList="columnList"
          :tableList="tableList"
          ref="table"
        />
        <CommonForm :tableForm="tableForm2" />
      </div>
      <div class="btn">
        <a-button class="submit" @click="submit">提交</a-button>
        <a-button @click="resetClick">重置</a-button>
      </div>
    </div>
  </div>
</template>
<script>
import { overseaFakeData } from '../config.js'
import CommonForm from '@/components/commonForm'
import CommonTable from '@/components/commonTable'
import { trademarkApply } from '@/api/protectionOfRights'
import FrontMixins from '@/mixins/frontMixin'

export default {
  mixins: [FrontMixins],
  data() {
    return {
      overseaFakeData,
      title: '佛山市知识产权保护商标监测预警需求表',
      tableForm1: [
        [
          { span: 6, label: '单位名称(中文及英文)' },
          { span: 18, value: '', props: 'applicant' }
        ],
        [
          { span: 6, label: '工作负责人' },
          { span: 2, label: '姓名' },
          { span: 4, value: '', props: 'leader' },
          { span: 2, label: '职务' },
          { span: 4, value: '', props: 'leaderJob' },
          { span: 2, label: '联系方式' },
          { span: 4, value: '', props: 'leaderContact' },
        ],
        [
          { span: 6, label: '技术联系人' },
          { span: 2, label: '姓名' },
          { span: 4, value: '', props: 'worker' },
          { span: 2, label: '职务' },
          { span: 4, value: '', props: 'workerJob' },
          { span: 2, label: '联系方式' },
          { span: 4, value: '', props: 'workerContact' },
        ],
        [
          { span: 6, label: '电子邮箱' },
          { span: 18, value: '', props: 'email' }
        ],
      ],
      tableForm2: [
        [
          { span: 5, label: '主要监测类别(尼斯分类号) ' },
          { span: 7, value: '', props: 'monitorCategory' },
          { span: 4, label: '主要监测国家/地区' },
          { span: 8, value: '', props: 'monitorCountry' }
        ],
        [
          { span: 5, label: '监测需求和理由说明' },
          { span: 17, value: '', props: 'monitorReason', type: 'textarea' },
        ],
      ],
      plainOptions: [
        { label: '抢注', value: '0' },
        { label: '撤销', value: '1' },
        { label: '无效', value: '2' },
      ],
      columnList: [
        { label: '序号', span: 2 },
        { label: '商标所有人', span: 7 },
        { label: '商标中文', span: 5, noRequired: true },
        { label: '商标英文', span: 5, noRequired: true },
        { label: '监测需求', span: 5 },
      ],
      tableList: [],
      tableForm1Copy: [],
      tableForm2Copy: [],
      tableListCopy: []
    }
  },
  components: {
    CommonForm,
    CommonTable
  },
  created() {
    this.tableForm1Copy = JSON.parse(JSON.stringify(this.tableForm1))
    this.tableForm2Copy = JSON.parse(JSON.stringify(this.tableForm2))
    this.initTable()
  },
  methods: {
    initTable() {
      let tableList = []
      for (let i = 0; i < 2; i++) {
        let arr = [
          { props: 'index', type: 'span', value: 0, span: 2 },
          { props: 'trademarkCode', type: 'input', value: '', span: 7 },
          { props: 'tradermark', type: 'input', value: '', span: 5 },
          { props: 'trademarkEn', type: 'input', value: '', span: 5 },
          { props: 'monitorType', type: 'checkbox', value: [], span: 5 },
        ]
        tableList.push(arr)
        this.tableList = tableList
      }
      this.tableListCopy = JSON.parse(JSON.stringify(this.tableList))
    },
    resetClick() {
      this.tableForm1 = JSON.parse(JSON.stringify(this.tableForm1Copy))
      this.tableForm2 = JSON.parse(JSON.stringify(this.tableForm2Copy))
      this.tableList = JSON.parse(JSON.stringify(this.tableListCopy))
    },
    submit() {
      if (this.authorityManagement()) {
        return
      }
      let isRequired = true
      let checkForm = [
        { props: 'leaderContact', checkRules: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/, message: '请填写正确的工作负责人联系方式!' },
        { props: 'workerContact', checkRules: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/, message: '请填写正确的技术联系人联系方式!' },
        { props: 'email', checkRules: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, message: '请填写正确的邮箱!' },
      ]
      this.tableForm1.forEach(item => {
        item.forEach(ele => {
          if (ele.props && !ele.noRequired && ele.value === '') {
            isRequired = false
          }
          checkForm.forEach(res => {
            if (res.props === ele.props) {
              if (!res.checkRules.test(ele.value)) {
                this.$message.warning(res.message)
              }
            }
          })
        })
      })
      this.tableForm2.forEach(item => {
        item.forEach(ele => {
          if (ele.props && !ele.noRequired && ele.value === '') {
            isRequired = false
          }
        })
      })


      if (!isRequired) {
        this.$message.warning('有必填或必选项没有填写或选择。')
        return
      }
      let organizeData = this.$refs.table.organizeData()

      if (organizeData)
        this.$confirm({
          title: '一旦提交不可修改，请认真检查，是否确认提交；是，就提交上去；否，返回检查可继续修改表单',
          onOk: () => {
            let obj = {
              type: '1'
            }
            this.tableForm1.forEach(item => {
              item.forEach(ele => {
                if (ele.props) {
                  obj[`${ele.props}`] = ele.value
                }
              })
            })
            this.tableForm2.forEach(item => {
              item.forEach(ele => {
                if (ele.props) {
                  obj[`${ele.props}`] = ele.value
                }
              })
            })
            obj.trademarkDetailList = organizeData

            trademarkApply(obj).then(res => {
              let { code, msg } = res
              if (code === 200) {
                this.$message.success(`您已成功提交${this.title}业务申请`)
                this.resetClick()
              } else {
                this.$message.error(msg)
              }
            })
          },
          onCancel() {
          },
          class: 'test',
        });
    },
  }
}
</script>